<template>
  <div class="public_height100 p20 pub_bgColorFFF">
    <div class="table_content">
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between">
        <div class="table_filter_select">
          <el-radio-group v-model="params.status" size="small" @input="radioChange">
            <el-radio-button label="1">线上待支付</el-radio-button>
            <el-radio-button label="2">线上已取消</el-radio-button>
            <el-radio-button label="3">线上已完成</el-radio-button>
            <el-radio-button label="4">线下待审核</el-radio-button>
            <el-radio-button label="5">线下已拒绝</el-radio-button>
            <el-radio-button label="6">线下已通过</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!-- ====== 表格上方的筛选条件 end ======-->
      <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`${536 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
        <el-table-column type="selection" align="center" :width="`${50 * $f}`" />
        <el-table-column label="订单编号" show-overflow-tooltip align="center">
          <template slot-scope="{ row }">
            {{ row.orderNo || row.id }}
          </template>
        </el-table-column>
        <el-table-column label="订单来源" show-overflow-tooltip prop="orderNo" align="center">
          <template slot-scope="{ row }">
            {{ row.orderSource === '1' ? '小程序端' : row.orderSource === '2' ? '电脑端' : 'APP端' }}
          </template>
        </el-table-column>
        <el-table-column label="会员类型" show-overflow-tooltip prop="orderNo" align="center">
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.subscribeType === '1'" class="cYE">体验会员</span>
              <span v-else class="cGR">年费会员</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="params.status * 1 > 3" key="screenShot" label="转账截图" align="center">
          <template slot-scope="{ row }">
            <el-image style="width: 50px; height: 50px; cursor: pointer" :src="row.screenShot" :preview-src-list="[row.screenShot]" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column :label="`${params.status === '3' ? '支付金额' : '待支付金额'}`" show-overflow-tooltip prop="orderNo" align="center">
          <template slot-scope="{ row }">
            {{ row.subscribeType === '1' ? '￥19.9' : '￥298' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.status === '3'" label="支付时间" show-overflow-tooltip prop="payTime" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.payTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" show-overflow-tooltip prop="createTime" align="center">
          <template slot-scope="{ row }">
            {{ row.submitTime || row.createTime || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.status * 1 > 3" label="审核时间" show-overflow-tooltip prop="createTime" align="center">
          <template slot-scope="{ row }">
            {{ row.auditTime || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.status * 1 == 1" key="remainingTime" label="剩余支付时间" show-overflow-tooltip prop="createTime" align="center">
          <template slot-scope="{ row }">
            {{ row.remainingTime || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.status === '5'" key="rejectReason" label="拒绝原因" show-overflow-tooltip align="center" :min-width="`${200 * $f}`">
          <template slot-scope="{ row }">
            {{ row.rejectReason || '/' }}
          </template>
        </el-table-column>
        <el-table-column v-if="params.status === '1'" key="operation" label="操作" align="center" :width="`${150 * $f}`">
          <template slot-scope="{ row }">
            <el-button v-if="row.orderSource == '2'" type="text" class="pub_button public_1EB398_btn" size="mini" @click="payNow(row)">立即支付</el-button>
            <div v-else-if="row.orderSource == '1'">请去小程序端支付</div>
            <div v-else-if="row.orderSource == '3'">请去APP端序端支付</div>
          </template>
        </el-table-column>
        <template slot="empty">
          <PageEmptyData />
        </template>
      </el-table>
      <div ref="pubPageinationRef" class="pub_pageination flex_center mt18">
        <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="tableData.length" @current-change="changePage" @size-change="changeSize"> </el-pagination>
      </div>
    </div>
    <!-- 导入弹窗 -->
    <el-dialog title="微信支付" :visible.sync="wxPayVisibleDialog" :width="`${$f * 600}px`" custom-class="pay_dialog wxPayDialog" :show-close="false" :close-on-click-modal="false">
      <div class="closePayDialog flex_center" @click="closeDialogWxPayDialog">x</div>
      <div class="flex_center_column">
        <div class="pay_dialogContent_qrcode flex_center">
          <img :src="parParams.qrCodeUrl" />
        </div>
        <div class="flex_center pay_dialogContent_qrcodeTip">
          <span>请用微信扫一扫</span>
          <img src="@/assets/img/vipIcon_wechat.png" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tableFun from '@/mixin/tableFun.js';
import pay from '@/mixin/pay.js';
import QRCode from 'qrcode';
import dayjs from 'dayjs';
import { EventBus } from '@/utils/eventBus';
export default {
  mixins: [tableFun, pay],
  data() {
    return {
      params: {
        status: '1',
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      statusList: [
        { name: '线上待支付', status: '1', online: true },
        { name: '线上已取消', status: '2', online: true },
        { name: '线上已完成', status: '3', online: true },
        { name: '线下待审核', status: '4', online: false },
        { name: '线下已拒绝', status: '5', online: false },
        { name: '线下已通过', status: '6', online: false }
      ],
      timer2: null,
      tableOrgList: [] //表格数据备份
    };
  },
  beforeDestroy() {
    this.clearSetInterval();
    this.clearSetInterval2();
  },
  created() {
    EventBus.$on('call-method', this.handleSearch);
    this.getDataList();
  },
  methods: {
    //关闭弹窗
    closeDialogWxPayDialog() {
      this.wxPayVisibleDialog = false;
      this.clearSetInterval();
    },
    //支付状态切换
    radioChange(e) {
      this.params.params = e;
      this.getDataList();
    },
    //获取表格数据
    async getDataList() {
      let url = this.params.status * 1 < 4 ? this.$url.payOrderList : this.$url.corporateTransferList;
      let params = {
        ...this.params
      };
      switch (this.params.status * 1) {
        case 1:
          params.status = '1';
          break;
        case 2:
          params.status = '3';
          break;
        case 3:
          params.status = '2';
          break;
        case 4:
          params.auditStatus = '1';
          break;
        case 5:
          params.auditStatus = '4';
          break;
        case 6:
          params.auditStatus = '3';
          break;
      }
      if (this.params.status * 1 > 3) {
        delete params.status;
      }
      let res = await this.$api.get(url, params);
      this.tableOrgList = res.rows;
      this.params.total = res.total;
      this.clearSetInterval2();
      if (this.params.status * 1 === 1 && this.tableOrgList.length > 0) {
        this.handleTableData();
        this.timer2 = setInterval(() => {
          this.handleTableData();
        }, 1000);
      } else {
        this.tableData = this.tableOrgList;
      }
    },
    handleTableData() {
      const now = dayjs();
      this.tableOrgList.forEach(el => {
        let endTime = dayjs(el.createTime).add(10, 'minute');
        const diff = endTime.diff(now, 'second');
        if (diff <= 0) {
          el.remainingTime = 0;
        } else {
          el.remainingTime = this.formatSecondsToMMSS(diff);
        }
      });
      this.tableData = this.tableOrgList.filter(el => {
        if (el.remainingTime != 0) {
          return el;
        }
      });
      if (this.tableData.length === 0) {
        this.clearSetInterval2();
      }
    },
    //修改页码
    changePage(pageNum) {
      this.params.pageNum = pageNum;
      this.getDataList();
    },
    //修改每页显示的条数
    changeSize(size) {
      this.params.pageSize = size;
      this.params.pageNum = 1;
      this.getDataList();
    },
    //搜索品牌
    handleSearch() {
      this.params.pageNum = 1;
      this.params.pageSize = 10;
      this.getDataList();
    },
    //立即支付
    async payNow(row) {
      if (row.subscribeType === '1' && this.$store.state.userInfo.isAlreadyTrial === '1') {
        this.$message.warning('体验订单只能购买一次');
      } else {
        let params = { subscribeType: row.subscribeType, orderNo: row.orderNo };
        let res = await this.$api.post(this.$url.wechatPayWeb, params);
        if (res.code == 200) {
          this.wxPayVisibleDialog = true;
          this.parParams = { ...res.data, orderNo: row.orderNo, qrCodeUrl: await QRCode.toDataURL(res.data.codeUrl) };
          this.clearSetInterval();
          this.timer = setInterval(() => {
            this.queryPayOrder2();
          }, 1000);
        }
      }
    },
    //查询订单状态
    async queryPayOrder2() {
      let res = await this.$api.get(this.$url.queryPayOrder, { orderNo: this.parParams.orderNo });
      if (res.code == 200 && res.data.status == 2) {
        this.$message.success('支付成功');
        this.closeDialogWxPayDialog();
        this.clearSetInterval();
        this.handleSearch();
        let req = await this.$api.get(this.$url.queryUserInfo);
        if (req.code == 200) {
          this.userInfo = req.data;
          this.$store.commit('setUserInfo', req.data);
        }
      }
    },
    //清除定时器
    clearSetInterval2() {
      clearInterval(this.timer2);
      this.timer2 = null;
    },
    formatSecondsToMMSS(seconds) {
      if (isNaN(seconds) || seconds < 0) {
        return '00分00秒';
      }
      // 计算分钟和剩余秒数
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      // 格式化为两位数（不足补0）
      return `${String(mins).padStart(2, '0')}分${String(secs).padStart(2, '0')}秒`;
    }
  }
};
</script>
<style lang="less" scoped>
.table_content {
  height: 100%;
  .pub_table {
    height: calc(100% - 80px);
  }
  ::v-deep {
    .el-radio-button__inner:hover {
      color: #27c1a5;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #27c1a5;
      border: 1px solid #27c1a5;
      box-shadow: -1px 0 0 0 #27c1a5;
      color: white;
    }
  }
}
</style>
